<template>
	<view class="address_window_container">
		<u-popup mode="bottom" closeable round="24rpx" :show="visible" @close="handleColse">
			<view class="pop_content">
				<view class="mt_16 fc fc_666 fz_18">
					优惠券
				</view>
				<view class="coupon_list box plr_16 fx fx_col">
					<u-tabs :list="tabsList" lineColor="#FE5A1C" itemStyle="width: 50%;padding:46rpx 0;"
						inactiveStyle="color: #999999" lineWidth="66rpx" lineHeight="10rpx"
						@click="handleChange"></u-tabs>
					<view class="fx_1 flow_y">
						<view class="list_item flow_h" v-for="item,index in couponList" :key="index">
							<Coupon :data="item" :showBtn="status==1" @select="handleSelect" />
						</view>
						<!-- <view class="ptb_16" v-if="couponList.length">
							<u-loadmore :status="loadingStatus" />
						</view> -->
						<view class="mt_32" v-if="!couponList.length&&!loading">
							<Empty title="暂无优惠券" />
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Empty from '@/components/Empty.vue'
	import Coupon from '@/components/order/Coupon.vue'
	import api from '@/service/config/api.js'
	export default {
		components: {
			Empty,
			Coupon
		},
		props: {
			visible: {
				default: false,
				type: Boolean
			},
			productId: {
				default: ()=>([]),
				type: Array
			},
			productType: {
				default: 2,
				type: Number
			}
		},
		data() {
			return {
				popVisible: false,
				dataList: [],
				tabsList: [{
					name: '可用',
					status: 1
				}, {
					name: '不可用',
					status: 2
				}],
				params: {
					productId: []
				},
				current: 1,
				size: 15,
				end: false,
				loading: true,
				status: 1
			}
		},
		watch: {
			visible(newVal) {
				if (newVal) {
					this.getData(true)
				}
			}
		},
		computed: {
			loadingStatus() {
				if (this.end) {
					return 'nomore'
				} else if (this.loading) {
					return 'loading'
				} else {
					return 'loadmore'
				}
			},
			couponList() {
				if(this.status == 1) {
					return this.dataList.usable || []
				}else {
					return this.dataList.unusable || []
				}
			}
		},
		methods: {
			getData(refresh = false) {
				this.loading = true
				this.$set(this.params,'productId',this.productId)
				this.$set(this.params,'productType',this.productType)
				api.post('/marketing/applet/api/user/discount_coupon/available/discount', {
					// page: {
					// 	current: this.current,
					// 	size: this.size,
					// },
					...this.params ? this.params : {}
				}, {
					noHideLoading: this.noHideLoading
				}).then(res => {
					this.dataList = res.data
				}).finally(() => {
					this.loading = false
				})
			},
			handleChange({
				status
			}) {
				this.status = status
			},
			// 关闭弹窗
			handleColse() {
				this.$emit('update:visible', false)
			},
			handleScrollBottom() {
				if (this.end) return
				this.current++
				this.getData(false)
			},
			handleSelect(data) {
				this.$emit('select',data)
			}
		},
	}
</script>

<style lang="scss">
	.address_window_container {
		.coupon_list {
			height: 680rpx;
		}

		.list_item+.list_item {
			margin-top: 24rpx;
		}
	}
</style>